<template>
	<div class="input-box">
		<div class="wei-input">
			<icon type="waiting" color="#44ADFB" size="16"></icon>
			<input class="input" auto-focus="" maxlength="11" placeholder="请输入手机号/ID" />
		</div>
		<div class="wei-input">
			<icon type="success" color="#44ADFB" size="16"></icon>
			<input class="input" auto-focus="" maxlength="15" placeholder="请输入密码(6~15位)" />
		</div>
		<div class="wei-input">
			<icon type="success" color="#44ADFB" size="16"></icon>
			<input class="input" auto-focus="" placeholder="请确认密码" />
		</div>
		<div class="wei-input">
			<icon type="waiting" color="#44ADFB" size="16"></icon>
			<input class="input" auto-focus="" placeholder="请输入6位数验证码" />
			<text class="input-code" bindtap="getCode">{{codeText}}</text>
		</div>
		<div>
			<button class="button" style="background-color: #33ccff; font-size: 15px; margin: 20px;"
				type="primary">立即注册</button>
		</div>
		<div>
			<p class="cc">注册即代表已同意<span class="zhu">《用户协议》</span></p>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				codeText: '获取验证码'
			}
		},
		methods: {

		}
	}
</script>

<style>
	.input-box {
		margin: 20px;
		margin-top: 70px;
	}

	.wei-input {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20px;
		padding-bottom: 20px;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.input {
		padding-left: 20rpx;
		/* font-size: 30px; */
	}

	.input-code {
		position: absolute;
		right: 40px;
		font-size: 15px;
		padding: 10rpx 15rpx;
		background-color: #ff8c69;
		border-radius: 10rpx;
	}
	.zhu{
		color: #00aa00;
	}
	.input-box .cc{
		margin: 0px;
		font-size: 12px;
	}
</style>